<template>
  <div class="container">
    <h1>Kubernetes Dashboard</h1>

    <div>
      <h2>Pods</h2>
      <ul>
        <li v-for="pod in pods" :key="pod">{{ pod }}</li>
      </ul>
    </div>

    <div>
      <h2>Nodes</h2>
      <ul>
        <li v-for="node in nodes" :key="node">{{ node }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      pods: [],
      nodes: []
    }
  },
  mounted() {
    fetch('/api/pods')
      .then(res => res.json())
      .then(data => {
        this.pods = data
      })
      .catch(err => console.error(err))

    fetch('/api/nodes')
      .then(res => res.json())
      .then(data => {
        this.nodes = data
      })
      .catch(err => console.error(err))
  }
}
</script>

<style>
.container {
  font-family: Arial, sans-serif;
  padding: 20px;
}
</style>